<template>
  <div class="product-detail">
    <h1>{{ $t('products.retort_pouches') }}</h1>
    <div class="product-content">
      <section class="product-features">
        <h2>{{ $t('productDetail.features') }}</h2>
        <ul>
          <li>{{ $t('retortPouch.features.high_temp') }}</li>
          <li>{{ $t('retortPouch.features.multi_layer') }}</li>
          <li>{{ $t('retortPouch.features.vacuum_seal') }}</li>
        </ul>
      </section>
      
      <section class="technical-specs">
        <h2>{{ $t('productDetail.specifications') }}</h2>
        <table>
          <tbody>
            <tr>
              <td>{{ $t('retortPouch.specs.material') }}</td>
              <td>PET/AL/CPP</td>
            </tr>
            <tr>
              <td>{{ $t('retortPouch.specs.thickness') }}</td>
              <td>120-180μm</td>
            </tr>
            <tr>
              <td>{{ $t('retortPouch.specs.size_range') }}</td>
              <td>100x150mm - 300x400mm</td>
            </tr>
          </tbody>
        </table>
      </section>
    </div>
  </div>
</template>

<script>
export default {
  name: 'RetortPouches',
  mounted() {
    this.$store.dispatch('factoryInfo/loadProductionData', 'retort-pouches');
  }
}
</script>

<style scoped>
.product-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  padding: 20px;
}
.technical-specs table {
  width: 100%;
  border-collapse: collapse;
}
.technical-specs td {
  padding: 8px;
  border: 1px solid #ddd;
}
</style>
